<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center movie_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub movie_fd0_0'>
          <view class='flex flex-wrap align-center movie_fd0_0_c0'>
            <!-- <text class='fu-iconfont2  movie_fd0_0_c0_c0'>&#xE794;</text> -->
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='movie_fd0_0_c1_c0'>档期</text>
          </view>
          <view class='flex flex-wrap align-center justify-end movie_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <benben-popup v-model="popupShow1719199109663" :mask="true" :mask-close-able="true" mode='right'>
        <!---筛选弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch movie_flex_1">
          <view class='flex flex-wrap align-center justify-between movie_fd1_0'>
            <text class='movie_fd1_0_c0'>筛选</text>
          </view>
          <view class='flex flex-direction flex-wrap'>
            <view class='flex flex-wrap align-center justify-between movie_fd1_1_c0'>
              <text class='movie_fd1_1_c0_c0'>婚礼/活动日期</text>
            </view>
            <view class='flex align-center movie_fd1_1_c1' @click.stop="isShow=true">
              <view class='flex flex-wrap align-center justify-center movie_fd1_1_c1_c0'>
                <text>{{start_data || '开始日期'}}</text>
              </view>

              <view class='flex  movie_fd1_1_c1_c1'></view>

              <view class='flex flex-wrap align-center justify-center movie_fd1_1_c1_c0'>
                <text>{{end_data || '结束日期'}}</text>
              </view>
            </view>
          </view>
          <view class='flex flex-direction flex-wrap'>
            <view class='flex flex-wrap align-center justify-center movie_fd1_2_c0'>
              <button class='movie_fd1_2_c0_c0' @tap.stop="resettingFunc()">重置</button>
              <button class='movie_fd1_2_c0_c1' @tap.stop="confirmFunc()">确认</button>
            </view>
          </view>
        </view>

        <!---筛选弹窗flex布局结束-->

      </benben-popup>
      <!--选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719199235784" :value.sync='startTime'
        mode='date' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true'
        start-year='1990-01-01' end-year='2050-12-31'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between movie_picker2_0'>
            <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text>时间选择</text>
            <text class='movie_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器结束 -->
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-between benben-flex-layout movie_flex_3">
        <view class='flex flex-wrap align-center movie_fd3_0'>
          <image class='movie_fd3_0_c0' mode="aspectFit" :src='STATIC_URL+"150.png"'></image>
          <benben-input type="text" :placeholder="`输入婚纱编号`" confirm-type="done" :maxlength="15" :adjust-position='true'
            placeholder-style="color:#999;font-size:28rpx" style="height: 70rpx;line-height: 70rpx;" v-model="keywords"
            @confirm="getListFunc" />
        </view>
        <text class='movie_fd3_1' @tap.stop="popupShow1719199109663=true">筛选</text>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center movie_fd4_0'>
          <text>档期数</text>
          <text class='movie_fd4_0_c1'>{{total}}</text>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch movie_fd4_1' v-for="(item,index) in dataList"
          @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/grzx/scheduledetail/scheduledetail?aid=${item.aid}`">
          <!-- <view class="margin-top-xs movie_fd4_1_c1_c1_c1_c0">
            <view class="movie_fd4_1_c1_c1_c1_c0">档期编号：{{item.schedule_number}}</view>
          </view> -->
          <view class="flex align-center">
            <view class="movie_fd4_1_c1_c1_c1_c0">客户名字：{{item.customerinfo_customer_name}}</view>
            <view class="margin-left-xs">
              <image class='movie_fd4_1_c1_c1_c0_c2' mode="aspectFill" v-if="item.customerinfo_customer_types==2"
                :src='STATIC_URL+"153.png"'></image>
              <image class='movie_fd4_1_c1_c1_c0_c2' mode="aspectFill" v-if="item.customerinfo_customer_types==3"
                :src='STATIC_URL+"155.png"'></image>

              <image class='movie_fd4_1_c1_c1_c0_c2' mode="aspectFill" v-if="item.customerinfo_customer_types==4"
                :src='STATIC_URL+"162.png"'></image>
              <image class='movie_fd4_1_c1_c1_c0_c2' mode="aspectFill" v-if="item.customerinfo_customer_types==1"
                :src='STATIC_URL+"152.png"'></image>
            </view>
          </view>
          <view class="margin-top-sm smovie_fd4_1_c1_c1_c1_c0">
            <view class="movie_fd4_1_c1_c1_c1_c0">客户电话：{{item.customerinfo_customer_phone}}</view>
          </view>
          <view class='flex margin-top-sm flex-wrap align-center'>
            <text class='movie_fd4_1_c1_c1_c1_c0'>{{item.customerinfo_customer_type_name}}时间：</text>
            <text class='self-center'>{{item.customerinfo_date_time}}</text>
          </view>
          <view class='flex margin-top-sm align-center'>
            <text class='self-center '>租赁档期：</text>
            <text>{{item.ben_time}}至{{item.end_time}}</text>
          </view>
          <view class='flex margin-top-sm align-center'>
            <text class='self-center '>备注信息：</text>
            <text>{{item.beizhuxinxi}}</text>
          </view>
          <view class="bosss"></view>
          <view class="margin-top-sm " v-for="(itemC,indexC) in item.wedding_dress_list" :key="indexC">
            <view class='flex flex-wrap align-center'>
              <text>婚纱编号：</text>
              <text>{{itemC.weddingdress_wedding_dress_number}}</text>
            </view>
            <view class='flex flex-wrap align-center movie_fd4_1_c1'>
              <image class='movie_fd4_1_c1_c0' mode="aspectFill" :src='itemC.weddingdress_wedding_dress_image[0]'>
              </image>

            </view>
          </view>

        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---flex布局flex布局结束-->


      <!-- 日历弹框 start -->
      <fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="closePopup">
        <view class="calendar-box">
          <fu-calendar @change="change" active-bg-color="#F9E4C3" range-bg-color="#f9e4c34d" :future="true"
            start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data"
            :end-time="end_data"></fu-calendar>
          <!-- <view @click="clearTime" class=" text-df padding-bottom-sm" style="text-align: center;color:#333333">清空</view> -->
        </view>
      </fu-popup>
      <!-- 日历弹框 end -->
    </view>
  </page-body>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        isShow: false,
        "pickerDiy1719199235784": false,
        "popupShow1719199109663": false,
        "startTime": "",
        "keywords": "",
        start_data: '',
        end_data: '',
        "cid": "",
        total: 0,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataList": []
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      // this.getTotal()
      this.getListFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getTotal() {
        let appointment_date = ''
        if (this.end_data) {
          appointment_date = this.start_data + ' - ' + this.end_data
        }
        this.$api.post(global.apiUrls.post66c6a5b24bf06, {
          page: "1",
          customerinfo_date_time: appointment_date,
          weddingdress_wedding_dress_number: this.keywords
        }).then(res => {
          if (res.data.code == 1) {
            this.total = res.data.data.total
          } else {
            this.total = 0
          }
        })
      },
      confirmFunc() {
        if (!this.end_data) {
          this.$message.info('请选择日期')
          return
        }
        this.popupShow1719199109663 = false
        this.isShow = false;
        this.getListFunc()
      },
      resettingFunc() {
        this.end_data = ''
        this.start_data = ''
        this.popupShow1719199109663 = false
        this.isShow = false;
        this.getListFunc()
      },
      change(value) {
        if (value.isInit) return;
        this.end_data = value.end
        this.start_data = value.start
        this.isShow = false;
      },
      closePopup() {
        this.isShow = false;
        // this.getListFunc()
      },
      getListFunc() {
        this.getTotal()
        let appointment_date = ''
        if (this.end_data) {
          appointment_date = this.start_data + ' - ' + this.end_data
        }
        this.minixPagingListsApi = global.apiUrls.post66c6a5b24bf06;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          customerinfo_date_time: appointment_date,
          weddingdress_wedding_dress_number: this.keywords
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
    }
  };
</script>
<style lang="scss" scoped>
  .bosss {
    // border-top: 2rpx solid #EEEEEE;
    height: 2rpx;
    background-color: #F8D9AD;
    margin-top: 24rpx;

  }

  // 日历弹框 start
  .calendar-box {
    background: #FFF;
    border-radius: 16rpx;
    width: 640rpx;
    padding: 0 24rpx;
    border: 1px solid transparent;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .movie_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .movie_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .movie_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .movie_fd0_0_c0 {
    width: 120rpx;
  }

  .movie_fd0_0 {

    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .movie_flex_1 {
    background: #fff;
    width: 566rpx;
    background-size: 100% auto !important;
    position: relative;
    padding: 120rpx 0rpx 0rpx 0rpx;
  }

  .movie_fd1_2_c0_c1 {
    background: #E4C391;
    border-radius: 0rpx 36rpx 36rpx 0rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor0);
    width: 246rpx;
    height: 72rpx;
    line-height: 72rpx;
    margin: 0rpx 0rpx 0rpx 18rpx;
  }

  .movie_fd1_2_c0_c0 {
    background: #F9E4C3;
    border-radius: 36rpx 0rpx 0rpx 36rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor0);
    width: 246rpx;
    height: 72rpx;
    line-height: 72rpx;
  }

  .movie_fd1_2_c0 {
    padding: 0 23rpx 24rpx 23rpx;
    position: absolute;
    top: 1000rpx;
  }

  .movie_fd1_1_c1_c1 {
    background: #999999;
    width: 30rpx;
    height: 1rpx;
    margin: 0rpx 24rpx 0rpx 24rpx;
    transform: scaleY(0.5);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .movie_fd1_1_c1_c0 {
    border: 1px solid #999999;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 230rpx;
    height: 72rpx;
  }

  .movie_fd1_1_c1 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .movie_fd1_1_c0_c0 {
    line-height: 45rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333333;
  }

  .movie_fd1_1_c0 {
    margin: 0rpx 24rpx 17rpx 32rpx;
  }

  .movie_fd1_0_c0 {
    line-height: 50rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333333;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .movie_fd1_0 {
    background: #fff;
    margin: 0rpx 0rpx 35rpx 0rpx;
    height: 86rpx;
    background-size: 100% auto !important;
  }

  .movie_picker2_0_c2 {
    color: rgba(211, 152, 80, 1);
  }

  .movie_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .movie_flex_3 {
    background: var(--benbenbgColor1);
    padding: 24rpx;
    background-size: 100% auto;
  }

  .movie_fd3_1 {
    color: rgba(211, 152, 80, 1);
  }

  .movie_fd3_0_c0 {
    width: 24rpx;
    height: 24rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .movie_fd3_0 {
    background: #F8F8F8;
    border-radius: 34rpx;
    width: 600rpx;
    height: 64rpx;
    line-height: 64rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .movie_fd4_1_c1_c1_c1_c0 {
    color: rgba(170, 170, 170, 1);
  }

  .movie_fd4_1_c1_c1_c1 {
    margin: 24rpx 0rpx 24rpx 0rpx;
  }

  .movie_fd4_1_c1_c1_c0_c2 {
    width: 115rpx;
    height: 34rpx;
  }

  .movie_fd4_1_c1_c1_c0_c1 {
    margin: 0rpx 24rpx 0rpx 24rpx;
  }

  .movie_fd4_1_c1_c1_c0 {
    font-weight: 600;
  }

  .movie_fd4_1_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .movie_fd4_1_c1_c0 {
    width: 144rpx;
    height: 184rpx;
    border-radius: 16rpx;
  }

  .movie_fd4_1_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .movie_fd4_1 {
    background: #FFFFFF;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx 24rpx 24rpx 24rpx;
    margin: 24rpx auto 0rpx auto;
    width: 686rpx;
  }

  .movie_fd4_0_c1 {
    font-size: 34rpx;
    color: rgba(211, 152, 80, 1);
    font-weight: 600;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .movie_fd4_0 {
    width: 686rpx;
    margin: 32rpx auto 0rpx auto;
  }
</style>
